<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
  对象写法
data(){
return {
styleObject:{
color:'red',
fontSize:'13px'
    }
  }
}
<div :style="styleObject"></div>

操作：
修改属性 app.styleObject.fontSize='50px'
增加属性 app.styleObject.width='200px'

数组写法
data(){
  return {
arr:[{
width:"200px",
height:"200px",
backgroundsize:"cover"
}],
}
}

 -->

    <div id="box">
        <div :style="styleObject">1111</div>
        <div :style="imgObj"></div>
        <button @click="handleAjax()">click</button>
    </div>
    <script>
        var obj = {
            data() {
                return {
                    styleObject: {
                        color: 'red',
                        backgroundColor: 'yellow',
                        fontSize: '23px'
                    },
                    imgObj: {
                        width: '300px',
                        height: '200px',
                        backgroundSize: 'cover',

                    }

                }
            },
            methods: {
                handleAjax() {
                    this.imgObj.backgroundImage = "url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fdac82f35-577a-4564-981f-8aeb08292d72%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707063532&t=9e5853703b735410302cd1998ada8846)"
                }
            },
        }

        var app = Vue.createApp(obj).mount('#box')
    </script>
</body>

</html>